<template>
  <div class="songs">
    <div class="topbox">
      <div class="left">{{ title }}歌曲50</div>
      <div class="right">
        <div class="toggle" @click="toggle">
          <i class="iconfont " :class="icon"></i>{{ toggleTitle }}
        </div>
      </div>
    </div>
    <!-- 歌曲列表 -->
    <div>
      <song-item :songs="songList"></song-item>
    </div>
  </div>
</template>

<script  type='module'>
import SongItem from './sheetItem.vue'// 引入歌手列表组件

export default {
  props: ['artistId', 'songList'],
  name: 'songs',
  components: {
    SongItem
  },
  data () {
    return {
      songs: [], // 歌曲列表
      icon: 'icon-dingshi',
      index: 0, // 切换歌曲排列
      toggleTitle: '按时间排列',
      title: '热门'
    }
  },
  methods: {
    toggle () {
      if (this.index === 0) {
        this.songs = []
        this.songsList('time')
        this.toggleTitle = '按热度排列'
        this.icon = 'icon-redu'
        this.title = '最新'
        this.index = 1
      } else {
        this.songs = []
        this.songsList('hot')
        this.toggleTitle = '按时间排列'
        this.icon = 'icon-dingshi'
        this.title = '热门'
        this.index = 0
      }
    },
    songsList (order) {
      this.$emit('toggleList', this.index)
    }
  },
  created () {
  },
  mounted () {

  }
}
</script>
<style scoped>
.songs {
  padding: 0 0.399467rem 0.399467rem;
  /* margin-bottom: 45px; */
  background-color: #fff;
  min-height: 7.856192rem;
  position: relative;
  /* z-index: -1; */
}
.topbox {
  width: 100%;
  font-size: 0.426099rem;
  margin-bottom: 0.133156rem;
  height: 0.665779rem;
  line-height: 0.665779rem;
  display: flex;
}
.left {
  flex: 1;
  font-size: 0.4rem;
}
.right {
  flex: 1;
}
.toggle {
  font-size: 0.346205rem;
  line-height: 0.665779rem;
  float: right;
}
.toggle .iconfont {
  font-size: 0.32rem;
  margin-right: 0.106667rem;
}
</style>
